<template>
  <div class="operate-menu">
    <ul class="left">
      <!--<li
        @click.stop="handleMiddleMenu('upper-step')"
        :class="[middleSelectType === 'upper-step' ? 'active' : '']"
      >
        <Tooltip content="上一步" placement="bottom">
          <Icon type="ios-undo" />
        </Tooltip>
      </li>
      <li
        @click.stop="handleMiddleMenu('next-step')"
        :class="[middleSelectType === 'next-step' ? 'active' : '']"
      >
        <Tooltip content="下一步" placement="bottom">
          <Icon type="ios-redo" />
        </Tooltip>
      </li>-->
      <li
        @click.stop="handleMiddleMenu('drag-drop')"
        :class="[middleSelectType === 'drag-drop' ? 'active' : '']"
      >
        <Tooltip content="拖拽" placement="bottom">
          <Icon type="md-move" />
        </Tooltip>
      </li>

      <li @click.stop="handleMiddleMenu('connection', 'Bezier')">
        <div class="svg-icon" v-html="BezierSvg"></div
      ></li>

      <li>
        <Dropdown trigger="click">
          <!--<Icon type="md-git-network" />
          <div class="svg-icon" v-html="selectLineSvg"></div>-->
          <div class="svg-icon" v-html="FlowchartSvg"></div>
          <DropdownMenu slot="list">
            <DropdownItem @click.stop.native="handleMiddleMenu('connection', 'Bezier')">
              <div class="svg-icon" v-html="BezierSvg"></div>
            </DropdownItem>
            <DropdownItem @click.stop.native="handleMiddleMenu('connection', 'Flowchart')">
              <div class="svg-icon" v-html="FlowchartSvg"></div>
            </DropdownItem>
            <DropdownItem @click.stop.native="handleMiddleMenu('connection', 'Straight')">
              <div class="svg-icon" v-html="StraightSvg"></div>
            </DropdownItem>
            <DropdownItem @click.stop.native="handleMiddleMenu('connection', 'StateMachine')">
              <div class="svg-icon" v-html="StateMachineSvg"></div>
            </DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </li>
      <!--<li @click.stop="handleMiddleMenu('enlarge')">
        <Tooltip content="放大" placement="bottom">
          <div class="svg-icon" v-html="EnlargeSvg"></div>
        </Tooltip>
      </li>
      <li @click.stop="handleMiddleMenu('narrow')">
        <Tooltip content="缩小" placement="bottom">
          <div class="svg-icon" v-html="NarrowSvg"></div>
        </Tooltip>
      </li>-->
    </ul>
    <ul class="right">
      <!--<li
        @click.stop="handleMiddleMenu('import')"
        :class="[middleSelectType === 'import' ? 'active' : '']"
      >
        <Tooltip content="导入工作流" placement="bottom">
          <Icon type="ios-cloud-upload-outline" />
        </Tooltip>
      </li>
      <li
        @click.stop="handleMiddleMenu('export')"
        :class="[middleSelectType === 'export' ? 'active' : '']"
      >
        <Tooltip content="导出工作流" placement="bottom">
          <Icon type="ios-cloud-download-outline" />
        </Tooltip>
      </li>
      <li
        @click.stop="handleMiddleMenu('restore')"
        :class="[middleSelectType === 'restore' ? 'active' : '']"
      >
        <Tooltip content="还原视图" placement="bottom">
          <Icon type="md-locate" />
        </Tooltip>
      </li>-->
      <li @click.stop="handleMiddleMenu('view-code')" :class="[middleSelectType === 'view-code' ? 'active' : '']" >
        <el-select v-model="tmptValue" placeholder="选择模板" size="mini" @change="handleTmptOptionsChange">
          <el-option
            v-for="item in tmptOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </li>
      <li  @click.stop="handleMiddleMenu('view-code')" :class="[middleSelectType === 'view-code' ? 'active' : '']"  >
        <el-link size="mini" icon="el-icon-view">查看Json数据</el-link>
      </li>
      <!--<li
        @click.stop="handleMiddleMenu('reset')"
        :class="[middleSelectType === 'reset' ? 'active' : '']"
      >
        <Tooltip content="重置" placement="bottom">
          <Icon type="md-refresh-circle" />
        </Tooltip>
      </li>-->
      <li @click.stop="handleMiddleMenu('clear')" :class="[middleSelectType === 'clear' ? 'active' : '']">
        <el-link size="mini" icon="el-icon-delete">清空画布</el-link>
      </li>
      <li @click.stop="handleMiddleMenu('save')" :class="[middleSelectType === 'save' ? 'active' : '']">
        <el-link size="mini" icon="el-icon-circle-check">保存</el-link>
      </li>
      <li @click.stop="handleRunMenu">
        <el-link size="mini" icon="el-icon-caret-right">运行</el-link>
      </li>
      <li @click.stop="handleRunMenu">
          <el-tooltip class="item" effect="light" placement="right">
            <template slot="content">
              1，同时只能打开一个设计器进行操作。<br/>
            </template>
            <el-link size="mini" icon="el-icon-warning">注意事项</el-link>
          </el-tooltip>
      </li>
    </ul>

    <!--:class="['flow-content', 'grid', dragMove.isDown ? 'flow-grab' : null]"-->
    <el-drawer
            title="执行日志"
            :visible.sync="runLogDrawer"
            :with-header="true"
            size="400px"
            @close="runLogDrawerClose"
    >
      <div style="padding: 0px 20px;">
        <div>{{runLogResult}}</div>
        <el-divider/>
        <div v-for="(log,index) in runLogList" :key="index" :class="log&&log.indexOf('>')==0?null:'nodeLogContent'" >{{log}}</div>
      </div>
    </el-drawer>

  </div>
</template>
<script>
import {
  BezierSvg,
  FlowchartSvg,
  StraightSvg,
  StateMachineSvg,
  EnlargeSvg,
  NarrowSvg,
} from "../config/icon.config";
import {executeTask} from '@/views/flow/taskflow/task/api'

import bus from "@/utils/bus";
import {tmptCircleEmailData} from '@/views/flow/taskflow/designer/data/tmpt-circle-email'
import {tmptNosqlDataCollectionData} from '@/views/flow/taskflow/designer/data/tmpt-nosql-data-collection'
import {tmptSqlCrudData} from '@/views/flow/taskflow/designer/data/tmpt-sql-crud'
import {tmptHttpIfData} from '@/views/flow/taskflow/designer/data/tmpt-http-if'

export default {
  name: "operate-menu",
  data() {
    return {
      // color: "#707070",
      BezierSvg: "",
      FlowchartSvg: "",
      StateMachineSvg: "",
      EnlargeSvg: "",
      NarrowSvg: "",
      StraightSvg: "",
      middleSelectType: "drag-drop", //操作类型
      selectLineSvg: "", //连接线的样式
      connector: "",
      runLogDrawer: false,
      runLogResult: '',
      runLogList: '',
      // 模板数据
      tmptValue:undefined,
      tmptOptions:[{
        value: 'tmpt-circle-email',
        label: '发送Email-循环-数据汇聚'
      }, {
        value: 'tmpt-nosql-data-collection',
        label: 'NoSql数据采集'
      }, {
        value: 'tmpt-sql-crud',
        label: 'SQL增删改查'
      }, {
        value: 'tmpt-http-if',
        label: 'Http调用-If逻辑'
      }]
    };
  },
  created() {
    this.iconSvgInit();
    this.selectLineSvg = BezierSvg("#707070");
  },
  methods: {
    handleTmptOptionsChange(val) {
      //this.handleClear()
      if (val==='tmpt-circle-email') {
        this.$store.commit("taskflow/setFlowData", tmptCircleEmailData);
      }
      if (val==='tmpt-nosql-data-collection') {
        this.$store.commit("taskflow/setFlowData", tmptNosqlDataCollectionData);
      }
      if (val==='tmpt-sql-crud') {
        this.$store.commit("taskflow/setFlowData", tmptSqlCrudData);
      }
      if (val==='tmpt-http-if') {
        this.$store.commit("taskflow/setFlowData", tmptHttpIfData);
      }
      bus.$emit('flowArea-RefreshFlowCanvas', undefined);
    },
    // 清空画布内容
    handleClear() {
      bus.$emit('flowArea-ClearFlowCanvas', undefined)
    },
    handleRunMenu() {
      const task = this.$store.state.taskflow.task;
      this.runLogDrawer = true
      this.runLogResult = '执行中...';
      executeTask({"taskFlowId":task.id}).then(r=>{
        this.runLogResult = r.content;
        this.runLogList = r.map.logList;
      })
    },
    runLogDrawerClose() {
      this.runLogResult = '';
      this.runLogList = [];
    },
    handleMiddleMenu(type, connector) {
      this.middleSelectType = type;
      this.iconSvgInit();
      if (type === "connection") {
        this.connector = connector;
        this.changeColor(this.connector, "#2d8cf0");
      } else if (type === "enlarge") {
        this.EnlargeSvg = EnlargeSvg("#2d8cf0");
      } else if (type === "narrow") {
        this.NarrowSvg = NarrowSvg("#2d8cf0");
      } else {
        this.changeColor(this.connector, "#707070");
      }
      this.$store.commit("taskflow/setFlowMenuObj", { type, connector });
    },
    changeColor(connector, color) {
      if (connector === "Bezier") {
        this.BezierSvg = BezierSvg(color);
        this.selectLineSvg = this.BezierSvg;
      } else if (connector === "Flowchart") {
        this.FlowchartSvg = FlowchartSvg(color);
        this.selectLineSvg = this.FlowchartSvg;
      } else if (connector === "StateMachine") {
        this.StateMachineSvg = StateMachineSvg(color);
        this.selectLineSvg = this.StateMachineSvg;
      } else if (connector === "Straight") {
        this.StraightSvg = StraightSvg(color);
        this.selectLineSvg = this.StraightSvg;
      }
    },
    iconSvgInit() {
      this.BezierSvg = BezierSvg("#707070");
      this.FlowchartSvg = FlowchartSvg("#707070");
      this.StateMachineSvg = StateMachineSvg("#707070");
      this.StraightSvg = StraightSvg("#707070");
      this.EnlargeSvg = EnlargeSvg("#707070");
      this.NarrowSvg = NarrowSvg("#707070");
    },
  },
};
</script>

<style scoped lang="scss">
.operate-menu {
  width: 100%;
  display: flex;
  justify-content: space-between;
  > ul {
    display: flex;
    list-style: none;
    > li {
      cursor: pointer;
      margin-right: 18px;
      font-size: 18px;
      position: relative;
      display: flex;
      align-items: center;
      &.active {
        color: #2d8cf0;
      }
      .svg-icon {
        display: flex;
        justify-content: center;
        svg {
          path {
            fill: chartreuse !important;
          }
        }
      }
    }
  }
  /deep/ .ivu-tooltip {
    display: flex;
    align-items: center;
  }
  .nodeLogContent {
    padding-left: 10px;
  }
}
</style>
